<script setup lang="ts">
import { getUserInfo } from '@/services/user'
import { useUserStore } from '@/stores'
import type { UserInfo } from '@/types/user'
import { ref, onMounted } from 'vue'
import userNavBar from './components/userNavBar.vue'
import { showConfirmDialog } from 'vant'
import { useRouter } from 'vue-router'

const userInfo = ref<UserInfo>()
const { user } = useUserStore()
const loadArticledetail = async () => {
  const res = await getUserInfo()
  userInfo.value = res.data
}
onMounted(() => loadArticledetail())

const store = useUserStore()
const router = useRouter()
const onLogout = async () => {
  await showConfirmDialog({
    title: '是否退出登录',
    message: '这就走了？不爱我了吗？',
    teleport: '.dialog'
  })
  // 点击的确认
  store.delUser()
  router.push('/login')
}
const onPush = () => router.push('/hot')
</script>

<template>
  <div class="user-page">
    <ic-nav-bar :border="false"></ic-nav-bar>
    <div class="header">
      <van-row>
        <van-col>
          <van-image :src="userInfo?.photo" round />
        </van-col>
        <van-col>
          <div class="text">
            <div class="mobile">{{ user?.mobile }}</div>
            <van-button>申请认证</van-button>
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="body">
      <van-row>
        <van-col span="8">
          <div class="top">{{ userInfo?.art_count }}</div>
          <div class="bottom">动态</div>
        </van-col>
        <van-col span="8">
          <div class="top">{{ userInfo?.follow_count }}</div>
          <div class="bottom">关注</div>
        </van-col>
        <van-col span="8">
          <div class="top">{{ userInfo?.fans_count }}W+</div>
          <div class="bottom">粉丝</div>
        </van-col>
      </van-row>
    </div>
    <div class="footer">
      <user-nav-bar
        left-text="热门技术"
        name="user-hot"
        :on-click-right="onPush"
        :on-click-left="onPush"
      ></user-nav-bar>
      <user-nav-bar
        left-text="退出登录"
        name="user-logout"
        :on-click-right="onLogout"
        :on-click-left="onLogout"
      ></user-nav-bar>
    </div>
    <div class="dialog"></div>
  </div>
</template>

<style lang="scss" scoped>
::v-deep(.van-image__img, .van-image__error, .van-image__loading) {
  width: 52px;
  height: 52px;
}

.user-page {
  background: url(../../assets/my-center.png) no-repeat top/cover;
  background-size: 375px 294px;
  &::after {
    content: '';
    position: absolute;
    top: 294px;
    display: block;
    width: 100%;
    height: 373px;
    background-image: linear-gradient(
      180deg,
      rgba(252, 253, 255, 0) 0%,
      #f7f9fd 12%,
      #f7f9fd 100%
    );
    border-radius: 1px;
  }
  > .van-nav-bar {
    background: none;
  }
  .header {
    margin-bottom: 16px;
    padding: 16px 24px;
    height: 84px;
    .text {
      margin-left: 12px;
      .mobile {
        font-size: 18px;
        color: #333333;
        letter-spacing: 0;
        line-height: 26px;
        font-weight: 500;
      }
      ::v-deep(.van-button) {
        padding: 0;
        width: 62px;
        height: 24px;
        font-size: 11px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        background-image: linear-gradient(124deg, #fff0cb 0%, #fbcf8d 100%);
        border-radius: 3px;
      }
    }
  }
  .body {
    padding: 8px 0 16px 0;
    text-align: center;
    height: 80px;
    .top {
      margin-bottom: 4px;
      font-family: DINAlternate-Bold;
      font-size: 24px;
      color: #1d2129;
      line-height: 32px;
      font-weight: 700;
    }
    .bottom {
      font-size: 12px;
      color: var(--ic-color4);
      line-height: 20px;
    }
  }
  .footer {
    padding: 0 16px;
    padding-top: 24px;
  }
  .dialog {
    :deep() {
      .van-dialog {
        width: 280px;
        height: 160px;
        border-radius: 8px;
        &__header {
          padding-top: 27px;
          font-size: 17px;
          color: var(--ic-color1);
          font-weight: 500;
        }
        &__message {
          color: #4e5969;
          &--has-title {
            padding-top: 12px;
            padding-bottom: 28px;
          }
        }
        &__confirm,
        &__confirm:active {
          color: var(--ic-color2) !important;
        }
        &__footer {
          .van-button--default {
            color: var(--ic-color4);
            height: 49px;
          }
        }
      }
    }
  }
}
</style>
